<template>
	<view class="preserve-view">
		<view class="preserve-up">
			<image src="../../static/icon/image_22.png" mode=""></image>
			<view class="preserve-time">
				{{companyName}} {{companyEdition}}
			</view>
		</view>

		<view class="preserve-down">
			<view class="item">
				<view class="desc">
					{{$t("preserve.name")}}
				</view>
				<input type="text" v-model="parms.bankUserName" :placeholder="$t('preserve.namePla')" :class="{'focus-sty': focus1}" @focus="focus1 = true"
					@blur="focus1 = false">
			</view>
			<view class="item">
				<view class="desc">
					{{$t("preserve.bank")}}
				</view>
				<input type="text" v-model="parms.bankName" :placeholder="$t('preserve.bankPla')" :class="{'focus-sty': focus2}" @focus="focus2 = true"
					@blur="focus2 = false">
			</view>
			<view class="item">
				<view class="desc">
					{{$t("preserve.acc")}}
				</view>
				<input type="number" v-model="parms.bankNum" :placeholder="$t('preserve.accPla')" :class="{'focus-sty': focus3}" @focus="focus3 = true"
					@blur="focus3 = false">
			</view>
		</view>
		
		<view class="save" @tap="saveInfo">
			{{$t("preserve.save")}}
		</view>
	</view>
</template>

<script>
	import { putUserInfo, getUserInfo, getAboutUs } from "@/common/api.js";
	
	export default {
		data() {
			return {
				focus1: false,
				focus2: false,
				focus3: false,
				parms: {
					bankName: null,
					bankNum: null,
					bankUserName: null
				},
				companyName: "",
				companyEdition: ""
			}
		},
		methods: {
			async saveInfo() {				
				for (let key in this.parms) {
					if(!this.parms[key]) {
						uni.showToast({
							icon: 'success',
							title: this.$t("preserve.hint"),
							duration: 1200
						})
						return
					}
				}
				
				const res = await putUserInfo({
					bankName: this.parms.bankName,
					bankNum: this.parms.bankNum,
					bankUserName: this.parms.bankUserName,
					userId: uni.getStorageSync("userId")
				});
				
				if(res.code == 200) {
					uni.redirectTo({
						url:"/pages/preserveMoney/preserveMoney"
					})
				}
			},
			async initUserInfo() {
				const res = await getUserInfo();
				console.log(res);
				if(res.code == 200) {
					this.parms.bankName = res.data.bankName;
					this.parms.bankNum = res.data.bankNum;
					this.parms.bankUserName = res.data.bankUserName;
				}
			},
			async initData() {
				// console.log("发起请求");
				const res = await getAboutUs()
				console.log(res.data);
				this.companyName = res.data.companyName;
				this.companyEdition = res.data.companyApp;
			}
		},
		onLoad() {
			this.initUserInfo();
			this.initData();
		},
		onReady() {
			uni.setNavigationBarTitle({ title: this.$t("preserve.title")});
		}
	}
</script>

<style lang="scss" scoped>
	.preserve-up {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 85rpx;

		image {
			width: 230rpx;
			height: 230rpx;
		}

		.preserve-time {
			color: #000000;
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
		}
	}

	.preserve-down {
		margin: 0 32rpx;
		margin-top: 48rpx;

		.item {
			display: flex;
			align-items: center;

			.desc {
				color: #000000;
				font-family: PingFang SC;
				font-weight: regular;
				font-size: 35rpx;
				width: 100rpx;
			}

			input {
				height: 80rpx;
				flex: 1;
				border-radius: 20rpx;
				background: #F1F1F1;
				padding-left: 32rpx;
				margin-left: 50rpx;
				box-sizing: border-box;
			}

			input::placeholder {
				color: #858585;
				font-family: PingFang SC;
				font-weight: regular;
				font-size: 30rpx;
			}
		}

		.item:nth-child(2) {
			margin: 32rpx 0;
		}
	}

	.focus-sty {
		border: 2rpx solid #000000;
	}
	
	.save {
		margin: 0 auto;
		margin-top: 100rpx;
		width: 700rpx;
		background: #000000;
		border-radius: 20rpx;
		height: 90rpx;
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 36rpx;
		color: #fff;
		text-align: center;
		line-height: 90rpx	;
	}
</style>
